<template>
  <div>
    <!-- 导航 -->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>城市管理</el-breadcrumb-item>
      <el-breadcrumb-item>城市列表</el-breadcrumb-item>
      <el-breadcrumb-item></el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 面板 -->
    <el-card>
      <el-row :gutter="20">
         <el-col :span="16">
          <!-- <el-input placeholder="请输入内容"><el-button slot="append" icon='el-icon-search'></el-button></el-input> -->
         </el-col>
         <el-col :span="4">
          <el-button @click="addbox=true " type="primary">添加城市</el-button>
         </el-col>
      </el-row>
      <!-- //表格 -->
          <el-table :data="areaList" border stripe>
            <el-table-column prop='id' label="序号"></el-table-column>
            <el-table-column prop="areaName" label="城市"></el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                
               <el-button @click="showEdit(scope.row)" size="mini" type="primary" icon="el-icon-edit"></el-button>

                 <el-button @click="showDel(scope.row.id)" size="mini" type="danger" icon='el-icon-delete' ></el-button>
                </template>
            </el-table-column>
          </el-table>
    </el-card>

     <!-- 修改框  -->
     <el-dialog title="修改城市" :visible.sync="editbox">
      <el-form >
          <el-form-item label="城市" >
            <el-input v-model="areaUpd.areaName"></el-input>
          </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
         <el-button @click="editbox=false">取 消</el-button>
         <el-button @click="updateArea" type="primary">确 定</el-button>
      </div>
      </el-dialog>

       <!-- 新增框  -->
     <el-dialog title="新增城市" :visible.sync="addbox">
      <el-form >
        <el-form-item label="城市" >
            <el-input v-model="areaAdd.areaName"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
         <el-button @click="addbox=false">取 消</el-button>
         <el-button @click="addArea" type="primary">确 定</el-button>
      </div>
      </el-dialog>
  </div>
</template>

<script>
export default {
  data(){
    return{
      areaList:[],
      editbox: false,  //显示修改框
      addbox: false ,  //显示新增框
      // 修改
      areaUpd:{
        areaName:'',
        id:''
      },
      // 新增
      areaAdd:{
        areaName:''
      }
      
    }
  },
  created(){
        this.getAreaList()
    },
    methods:{
      async showDel(id){
        let ok=await this.$confirm('此操作将永久删除, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).catch(err=>err);
        if(ok!='confirm'){
          return this.$message.info('你取消了删除')
        }
        let ret=await this.$http.delete(`areaInfo/delete/${id}`);
        if(ret.code != 200){
           return this.$message.error(ret.message )
        }
        this.$message.success(ret.message);
        this.getAreaList()
      },
      // 新增
      async addArea(){
        let ret=await this.$http.post('areaInfo/add',this.areaAdd);
        if(ret.code != 200){
           return this.$message.error(ret.message )
        }
        this.$message.success(ret.message)
        this.addbox = false
        this.getAreaList();
      },
      //更新
      async updateArea(){
        let ret=await this.$http.put('areaInfo/update',this.areaUpd);
         if(ret.code != 200){
           return this.$message.error(ret.message )
        }
        this.$message.success(ret.message)
        this.editbox = false
        this.getAreaList();
     },
      showEdit(row){
        this.editbox=true;
        this.areaUpd.id=row.id;
        this.areaUpd.areaName=row.areaName;
      },
      //查询
      async getAreaList(){
        let ret=await this.$http.get('areaInfo/selectAll');
        this.areaList=ret.data;
      }
    }
}
</script>

<style>

</style>